<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>中软电商网站</title>
	<link rel="stylesheet" type="text/css" href="style/reset.css">
	<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
	<!-- 网页头部开始 -->
	<div class="headBar">
		<!-- 顶部按钮开始 -->
		<div class="topBar">
			<div class="comWidth">
				<div class="leftArea">
					<a href="#" class="collection">收藏网站</a>
				</div>
				<div class="rightArea">
					<span>欢迎来到电商网！</span>
					<a href="#">[登录]</a>
					<a href="#">[免费注册]</a>
				</div>
			</div>
		</div>
		<!-- 顶部按钮结束 -->
		<!-- logo部分开始 -->
		<div class="logoBar">
			<div class="comWidth">
				<!-- logo图片 -->
				<div class="logo fl">
					<a href="#"><img src="images/logo.png" alt="logo标志"></a>
				</div>
				<!-- 搜索框 -->
				<div class="search_box fl">
					<input type="text" placeholder="请输入搜索的商品名称" class="search_text fl">
					<input type="button" value="搜 索" class="search_button fr">
				</div>
				<!-- 购物车 -->
				<div class="shopCar fr">
					<span class="shopText fl">购物车</span>
					<span class="shopNum fr">0</span>
				</div>
			</div>
		</div>
		<!-- logo部分结束 -->
		<!-- 导航开始 -->
		<div class="navBox">
			<div class="comWidth">
				<div class="shopClass">
					<h3>全部商品分类<i></i></h3>
					<!-- 商品列表开始 -->
					<div class="shopClass_show">
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="link">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">电脑整机</a>
								<a href="#" class="b">硬件外设</a>
								<a href="#" class="link">合约机</a>
							</dt>
							<dd>
								<a href="#">笔记本</a>
								<a href="#">超极本</a>
								<a href="#">台式机</a>
								<a href="#">平板</a>
							</dd>
							<!-- 商品列表子菜单 -->
							<dd class="shopClass_sub_menu">
								<div class="item">
									<div class="title">
										<a href="#">电脑整机</a>
									</div>
									<div class="content">
										<a href="#">笔记本1</a>
										<a href="#">笔记本2</a>
										<a href="#">笔记本3</a>
										<a href="#">笔记本4</a>										
									</div>
								</div>
								<div class="item">
									<div class="title">
										<a href="#">硬件外设</a>
									</div>
									<div class="content">
										<a href="#">内存</a>
										<a href="#">硬盘</a>
										<a href="#">主板</a>
										<a href="#">CPU</a>										
										<a href="#">显卡</a>
										<a href="#">网卡</a>
										<a href="#">键盘</a>
										<a href="#">鼠标</a>
									</div>
								</div>
								<div class="item">
									<div class="title">
										<a href="#">电脑整机</a>
									</div>
									<div class="content">
										<a href="#">笔记本1</a>
										<a href="#">笔记本2</a>
										<a href="#">笔记本3</a>
										<a href="#">笔记本4</a>										
									</div>
								</div>
								<div class="item">
									<div class="title">
										<a href="#">硬件外设</a>
									</div>
									<div class="content">
										<a href="#">内存</a>
										<a href="#">硬盘</a>
										<a href="#">主板</a>
										<a href="#">CPU</a>										
										<a href="#">显卡</a>
										<a href="#">网卡</a>
										<a href="#">键盘</a>
										<a href="#">鼠标</a>
									</div>
								</div>
								<div class="item">
									<div class="title">
										<a href="#">电脑整机</a>
									</div>
									<div class="content">
										<a href="#">笔记本1</a>
										<a href="#">笔记本2</a>
										<a href="#">笔记本3</a>
										<a href="#">笔记本4</a>										
									</div>
								</div>
							</dd>							
						</dl>
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="link">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="link">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
						<dl class="shopClass_item">
							<dt>
								<a href="#" class="b">手机</a>
								<a href="#" class="b">数码</a>
								<a href="#" class="link">合约机</a>
							</dt>
							<dd>
								<a href="#">荣耀3X</a>
								<a href="#">单反</a>
								<a href="#">智能设备</a>
							</dd>
						</dl>
					</div>
					<!-- 商品列表结束 -->
				</div>
				<ul class="nav">
					<li><a href="#" class="active">数码城</a></li>
					<li><a href="#">天黑黑</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">发现</a></li>
					<li><a href="#">二手特卖</a></li>
					<li><a href="#">名品会</a></li>
				</ul>
			</div>
		</div>
		<!-- 导航结束 -->
		<!-- banner开始 -->
		<div class="banner comWidth clearfix">
			<div class="banner_bar banner_big">
				<ul class="imgBox">
					<li><a href="#"><img src="images/banner/banner_01.jpg" alt="banner1.jpg"></a></li>
					<li><a href="#"><img src="images/banner/banner_02.jpg" alt="banner1.jpg"></a></li>
				</ul>
				<div class="imgNum">
					<a href="#" class="active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
		</div>
		<!-- banner结束 -->
	</div>
	<!-- 网页头部结束 -->

	<!-- 家用电脑标题开始 -->
	<div class="shopTit comWidth">
		<span class="icon"></span>
		<h3>家用电脑</h3>
		<a href="#" class="more">更多&gt;&gt;</a>
	</div>
	<!-- 家用电脑标题结束 -->

	<!-- 家用电脑商品列表开始 -->
	<div class="shopList comWidth clearfix">
		<div class="leftArea">
			<div class="banner_bar banner_sm">
				<ul class="imgBox">
					<li>
						<a href="#"><img src="images/banner/banner_sm_01.jpg" alt="banner1.jpg"></a>
					</li>
					<li>
						<a href="#"><img src="images/banner/banner_sm_02.jpg" alt="banner1.jpg"></a>
					</li>
				</ul>
				<div class="imgNum">
					<a href="#" class="active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
		</div>
		<div class="rightArea">
			<div class="shopList_top">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg.png" alt=""></a>
					</div>
					<h3>HTC最新系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg.png" alt=""></a>
					</div>
					<h3>HTC最新系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg.png" alt=""></a>
					</div>
					<h3>HTC最新系列</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg.png" alt=""></a>
					</div>
					<h3>HTC最新系列</h3>
					<p>1899元</p>
				</div>
			</div>
			<div class="shopList_bottom">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>NFC技术一碰轻松配对!接触屏幕</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>NFC技术一碰轻松配对!接触屏幕</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>NFC技术一碰轻松配对!接触屏幕</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>NFC技术一碰轻松配对!接触屏幕</p>
						<h3>￥149.00</h3>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 家用电脑商品列表结束 -->

	<!-- 食品酒水标题开始 -->
	<div class="shopTit comWidth">
		<span class="icon"></span>
		<h3>食品酒水</h3>
		<a href="#" class="more">更多&gt;&gt;</a>
	</div>
	<!-- 食品酒水标题结束 -->
	
	<!-- 食品酒水商品列表开始 -->
	<div class="shopList comWidth clearfix">
		<div class="leftArea">
			<div class="banner_bar banner_sm">
				<ul class="imgBox">
					<li>
						<a href="#"><img src="images/banner/banner_sm_02.jpg" alt="banner1.jpg"></a>
					</li>
					<li>
						<a href="#"><img src="images/banner/banner_sm_01.jpg" alt="banner1.jpg"></a>
					</li>
				</ul>
				<div class="imgNum">
					<a href="#" class="active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
		</div>
		<div class="rightArea">
			<div class="shopList_top">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg2.png" alt=""></a>
					</div>
					<h3>3月美食狂欢</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg3.png" alt=""></a>
					</div>
					<h3>3月美食狂欢</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg2.png" alt=""></a>
					</div>
					<h3>3月美食狂欢</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg3.png" alt=""></a>
					</div>
					<h3>3月美食狂欢</h3>
					<p>1899元</p>
				</div>
			</div>
			<div class="shopList_bottom">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm2.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>康比特咀嚼片</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm2.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>康比特咀嚼片</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm2.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>康比特咀嚼片</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm2.png" alt=""></a>
					</div>
					<div class="shop_text">
						<p>康比特咀嚼片</p>
						<h3>￥149.00</h3>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 食品酒水商品列表结束 -->

	<!-- 衣服服饰标题开始 -->
	<div class="shopTit comWidth">
		<span class="icon"></span>
		<h3>衣服服饰</h3>
		<a href="#" class="more">更多&gt;&gt;</a>
	</div>
	<!-- 衣服服饰标题结束 -->
	
	<!-- 衣服服饰商品列表开始 -->
	<div class="shopList comWidth clearfix">
		<div class="leftArea">
			<div class="banner_bar banner_sm">
				<ul class="imgBox">
					<li>
						<a href="#"><img src="images/banner/banner_sm_03.jpg" alt="banner1.jpg"></a>
					</li>
					<li>
						<a href="#"><img src="images/banner/banner_sm_01.jpg" alt="banner1.jpg"></a>
					</li>
				</ul>
				<div class="imgNum">
					<a href="#" class="active"></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
		</div>
		<div class="rightArea">
			<div class="shopList_top">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg4.png" alt=""></a>
					</div>
					<h3>夏季清凉</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg4.png" alt=""></a>
					</div>
					<h3>夏季清凉</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg4.png" alt=""></a>
					</div>
					<h3>夏季清凉</h3>
					<p>1899元</p>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImg4.png" alt=""></a>
					</div>
					<h3>夏季清凉</h3>
					<p>1899元</p>
				</div>
			</div>
			<div class="shopList_bottom">
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm3.jpg" alt=""></a>
					</div>
					<div class="shop_text">
						<p>皮夹克</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm3.jpg" alt=""></a>
					</div>
					<div class="shop_text">
						<p>皮夹克</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm3.jpg" alt=""></a>
					</div>
					<div class="shop_text">
						<p>皮夹克</p>
						<h3>￥149.00</h3>
					</div>
				</div>
				<div class="shop_item">
					<div class="shop_img">
						<a href="#"><img src="images/shopImgSm3.jpg" alt=""></a>
					</div>
					<div class="shop_text">
						<p>皮夹克</p>
						<h3>￥149.00</h3>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 衣服服饰商品列表结束 -->

	<div class="hr_25"></div>

	<!-- 网页底部开始 -->
	<div class="footer">
		<p>地址：大连高新园区广贤路97号中软国际</p>
		<p>电话 0411-84977106 | 传真 0411-84755568 </p>
		<p>
			<a href="#"><img src="images/webLogo.png" alt=""></a>
			<a href="#"><img src="images/webLogo.png" alt=""></a>
			<a href="#"><img src="images/webLogo.png" alt=""></a>
			<a href="#"><img src="images/webLogo.png" alt=""></a>
		</p>
	</div>
	<!-- 网页底部结束 -->
</body>
</html>